<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.事件的基本使用.html</title>
    <!-- 引用开发版 -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
    事件基本使用：
        1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
        2.事件的回调需要配置在methods对象中，最终会在vm上
        3.methods中配置的函数，不要用箭头函数！否则this就不是vm实例了
        4.methods中配置的函数，都是被Vue管理的函数，this的指向就是vm实例 或 组件实例对象
        5.@click="demo" 和 @click="demo($event)"效果一致，但是后者可以传参
     -->
    <!-- 准备一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <button v-on:click="showInfo">点我显示信息</button>
        <button @click="showInfo">点我显示信息</button>

        <button @click="showInfo2($event, 66)">点我显示信息2</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip=false

        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'   
            },
            methods: {
                showInfo(event) {
                    console.log(event)
                    console.log(event.target)
                    console.log(this) // 此处的this就是vm实例
                    alert('同学你好！')
                },
                showInfo2(event, num) {
                    console.log(event)
                    console.log(num)
                    alert('同学你好！!')
                }
            }
        })
    </script>
</body>
</html